<template>
    <div class="tools-div">
        <el-button type="success" size="small" @click="addShow">添 加</el-button>
    </div>

    <el-table :data="list" style="width: 100%">
        <el-table-column prop="name" label="品牌名称" />
        <el-table-column prop="logo" label="品牌图标" #default="scope">
            <img :src="scope.row.logo" width="50" />
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" align="center" width="200" #default="scope" >
            <el-button type="primary" size="small" @click="editShow(scope.row)" >
                修改
            </el-button>
            <el-button type="danger" size="small" @click="deleteById(scope.row.id)">
                删除
            </el-button>
        </el-table-column>
    </el-table>

    <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next"
        :total="total"
    />


    
		<el-dialog
			v-model="dialogVisible"
			title="添加品牌"
			width="50%"
		>	
			<el-form label-width="70px" size="small">
				<el-form-item label="品牌名称">
					<el-input
						style="width: 100%"
						placeholder="品牌名称"
						v-model="brand.name"
					></el-input>
				</el-form-item>
				

				<el-form-item label="品牌logo">

					<el-upload
						class="avatar-uploader"
						action="http://localhost:8501/admin/system/upload/upload"  
						:headers="mytoken"
						:on-success="handleAvatarSuccess"
					>
						<img v-if="brand.logo" :src="brand.logo" class="avatar" width="150"  />
						<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
					</el-upload>

				</el-form-item>


				<el-row style="display:flex">
					<el-button type="primary" size="small" @click="submitDialog" >
						提交
					</el-button>
				</el-row>
			</el-form>
			
		</el-dialog>


</template>

<script setup>
import { ref ,onMounted } from 'vue'

import {GetBrandPageList ,SaveBrand,UpdateBrandById,DeleteBrandById} from '@/api/brand'
import { ElMessage,ElMessageBox } from 'element-plus'


let mytoken = {
    token: JSON.parse(window.localStorage['VEA-TOKEN']).token
}

// 定义表格数据模型
const list = ref([
    {"id":1 , "name":"华为" , "logo":"http://139.198.127.41:9000/sph/20230506/华为.png"} , 
    {"id":2 , "name":"小米" , "logo":"http://139.198.127.41:9000/sph/20230506/小米.png"} , 
])

// 分页条数据模型
const total = ref(0)

//定义分页参数
let pageParam = ref({
    pageNum:1,
    pageSize:5
})

let fetchData = async ()=>{
    let {data} = await GetBrandPageList(pageParam.value.pageNum,pageParam.value.pageSize);
    //data 就是 pageInfo
    list.value = data.list
    total.value = data.total
}


let dialogVisible = ref(false)
let brand = ref({
    name:'',
    logo:''
})

let addShow = ()=>{
    dialogVisible.value = true
    brand.value.name = ''
    brand.value.logo = ''
}


//上传图片接口调用成功后
let handleAvatarSuccess = (response,uploadFile)=>{
    brand.value.logo = response.data
}


onMounted(()=>{
    fetchData()
})

/* let submitDialog = async ()=>{
    await SaveBrand(brand.value) // { name:xx,logo:xxx }
    dialogVisible.value = false
    fetchData()
} */
//弹窗上的提交按钮
let submitDialog = async ()=>{
		//添加和修改使用同一个弹窗，同一个提交按钮
		if(brand.value.id){
			//修改
			let {code,message} = await UpdateBrandById(brand.value)
			if(code==200){
				ElMessage.success('修改成功')
				dialogVisible.value = false
				fetchData()
			}else{
				ElMessage.warning('修改失败,' + message)
			}


		}else{
			//添加
			let {code,message} =  await SaveBrand(brand.value)
			if(code==200){
				ElMessage.success('添加成功')
				dialogVisible.value = false
				fetchData()
			}else{
				ElMessage.warning('添加失败,' + message)
			}
			
		}
	}

let editShow = (row)=>{
		brand.value = row
		dialogVisible.value = true
	}

	//删除按钮
	let deleteById = async (id)=>{
		let {code} = await DeleteBrandById(id)
		if(code==200){
			ElMessage.success('删除成功')
			fetchData()
		}else{
			ElMessage.warning('删除失败')
		}
	}

</script>

<style scoped>
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>